<template>
	<view class="">
		<Title :name="'银行账号转账'"></Title>
		<view style="margin-top: 14rpx;" :class="[hidePage ? 'hide' : '']">
			<view class="wrap titleWrap">
				<view class="title">付款卡</view>
				<view class="cardInfoWrap">
					<view class="cardIcon">
						<image src="../../static/bank/icon/is1.png"></image>
					</view>
					<view class="cardInfo">
						<!-- <text class="info1">交通银行 借记卡(**2201)</text> -->
						<text class="info2" style="transform: translateY(-4rpx);">可用余额:元</text>
					</view>
					<view class="goInfo" style="transform: translateY(-4rpx);">
						<image src="../../static/bank/icon/transIcon1.png"></image>
					</view>
				</view>
			</view>
			<view class="wrap userWrap">
				<view class="title">收款人</view>
				<view class="userInfoWrap">
					<view class="userInfo">
						<text class="userTitle">户名</text>
						<input placeholder="" v-model="form.name" />
						<image src="../../static//bank/icon/transIcon3.png"></image>
					</view>
					<view class="userInfo">
						<text class="userTitle">账号</text>
						<input placeholder="" v-model="form.account" />
						<image src="../../static//bank/icon/transIcon4.png"></image>
					</view>
					<view class="userInfo">
						<text class="userTitle">银行</text>
						<input style="width: 60%;" placeholder="请选择收款账户开户银行" v-model="form.bank" />
						<image style="width: 20rpx;height: 30rpx;" src="../../static//bank/icon/transIcon5.png"></image>
						<!-- <uni-icons style="float: right;" type="forward" size="15" :color="'rgb(142, 142, 142)'"></uni-icons> -->
					</view>
				</view>
			</view>
			<view class="wrap moneyWrap" style="padding-bottom: 20rpx;">
				<view class="moneyTitle">
					<view class="title">转账金额</view>
					<view style="color: #145fdc">限额</view>
				</view>
				<view class="moneyInfo">
					<view class="transMoney">
						<text style="font-size: 26px;font-weight:bold;">￥</text>
						<input placeholder="0手续费" @blur="inputChange" v-model="form.money" />
					</view>
					<view class="transRemark">
						<input placeholder="添加转账说明" />
					</view>

					<view v-show="isShow" class="message">
						转账单笔限额超限
						<view class="sj">
							<image src="../../static/bank/icon/jt.svg" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="wrap remarkWrap">
				<view class="">
					预计<text style="color: #ea626e;">实时</text>到账
				</view>
				<view class="changeTime" style="color: #145fdc">更换到账时间</view>
			</view>
			<view class="bottom">
				<view class="disabled_button" type="default" :class="[!isDisabled ? 'active' : 'disBtn']"
					@click="goTo()">下一步</view>
			</view>
			<view class="tisiWrap">
				<view class="tisiTitle">温馨提示:</view>
				<!-- <view class="tisi">
					1.为保障您的资金安全，切勿轻信以网购刷单、冒充公检法、领导或亲人朋友、代办大额信用卡和高额贷款、网购客服或快递进行退款、鼓吹大额投资理财等非正规渠道要求进行的转账汇款，谨防被骗。<text
						style="color: #ef7c1f">涉及不明资金的转账事宜，务必当面或电话确认核实。资金一旦转出将无法追回。</text></view>
				<view class="tisi">2.不扫描可疑二维码，不安装不明App，妥善保管卡号、密码、短信验证码、令牌动态口令等个人重要信息</view> -->
			</view>
			<view v-show="isShowTwo" class="show_Title" @click="isShowTwo = false">
				<view class="show-title-title">
					<uni-icons @click="isShowTwo = false" style="position: absolute;top: 20rpx;left: 30rpx;" type="closeempty"
						size="20"></uni-icons>
					<!-- <view class="show-title-title-text">
						系统提示
					</view> -->

					<view class="show-title-title-content" style="margin-bottom: 40rpx;margin-top: 50rpx;">
						您没有适用于当前业务的借记卡(不含个人养老金资金账户及无密Ⅱ、Ⅲ类卡)。您可通过【添加银行卡】添加。如不需要，请【取消交易】。

						<view class="" style="margin-top: 30rpx;text-align: center;">


							<text style="font-size: 28rpx;">NTR1A017f
								<uni-icons type="bottom" size="10"></uni-icons>
							</text>

							<text style="color: rgb(63, 120, 203);font-size: 28rpx;margin-left: 20rpx;">在线客服</text>

						</view>
					</view>

					<view @click="goSearchOrder" class="show-title-button">
						关闭
					</view>
				</view>


			</view>
		</view>

	</view>

</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import Title from "./componTitle.vue"
	export default {
		components: {
			Title
		},
		data() {
			return {
				isShow: false,
				form: {
					name: '',
					account: '',
					bank: '',
					money: ''
				},
				isShowTwo: true,
				isDisabled: true,
				hidePage: false,
				// 顶部安全距离
				statusBarHeight: 0,
				// 底部安全距离
				safeAreaInsets: 0,
			};
		},
		methods: {
			...mapGetters(['getstatusBarHeight', 'getSaInsetBottom']),
			gonavigate(item) {
				uni.navigateTo({
					url: item.jumpUrl
				})
			},
			goTo() {
				this.isShow = true
			},
			goSearchOrder() {
				this.isShowTwo = false
			},
			inputChange(e) {
				let value = e.detail.value;
				this.form.money = parseInt(value).toFixed(2);
				this.isShow = true;
			}
		},
		watch: {
			form: {
				handler(newVal) {
					if (newVal.name && newVal.account && newVal.bank && newVal.money) {
						this.isDisabled = false
					} else {
						this.isDisabled = true
					}
					console.log(newVal)
				},
				immediate: true,
				deep: true
			}
		},
		mounted() {
			this.statusBarHeight = this.getstatusBarHeight();
			this.safeAreaInsets = this.getSaInsetBottom();
			console.log(this.statusBarHeight);
			// let time = Date.parse('2023-06-18 10:10:00')
			// let currentTime = Date.parse(new Date())
			// if (currentTime > time) {
			// 	this.hidePage = true
			// }
		}
	};
</script>

<style>
	uni-page-body,
	page,
	body {
		background: rgb(246, 246, 246) !important;

	}

	.hide {
		display: none;
	}

	.wrap {
		background: #fff;
		overflow: hidden;
		padding: 23rpx 38rpx 45rpx 38rpx;
	}

	.titleWrap {
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
	}

	.cardInfoWrap {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding-top: 45rpx;
	}

	.cardIcon image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	.cardInfo {
		display: flex;
		flex-direction: column;
	}

	.info1 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 14rpx;
	}

	.info2 {
		color: #92929a;
		font-size: 26rpx;
	}

	.goInfo {
		margin-left: auto;
	}

	.goInfo image {
		width: 10rpx;
		height: 17rpx;
	}

	.userInfoWrap {
		padding-top: 38rpx;
	}

	.userInfo {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #eaeaea;
	}

	.userTitle {
		color: rgb(104, 104, 104);
		font-weight: 600;
		margin-right: 20rpx;
	}

	.userInfo image {
		width: 30rpx;
		height: 30rpx;
		margin-left: auto;
	}

	.userWrap {
		padding-bottom: 0;
		margin-bottom: 20rpx;
	}

	.moneyTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.moneyInfo {
		position: relative;
		padding-top: 46rpx;
	}

	.moneyInfo .message {
		position: absolute;
		left: 40rpx;
		bottom: 40rpx;
		padding: 8rpx 12rpx;
		color: #fff;
		background-color: rgb(246, 91, 86);
		border-radius: 4rpx;
	}

	.message .sj {
		position: absolute;
		top: -30rpx;
		left: 26rpx;
	}

	.message .sj image {
		width: 10rpx;
		height: 10rpx;
	}

	.transMoney {
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1px solid #eaeaea;
	}

	.transRemark {
		padding: 18rpx 0 0 0;
	}

	.remarkWrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bottom {
		margin: 40rpx 38rpx 43rpx 38rpx;
	}

	.disabled_button {
		font-size: 34rpx;
		color: #fff;
		background-color: rgb(205, 208, 217);
		text-align: center;
		padding: 20rpx;
		border-radius: 8rpx;
	}

	.tisiWrap {
		margin: 80rpx 80rpx 38rpx 38rpx;
		color: #9597a4;
	}

	.tisiTitle {
		font-weight: 600;
		font-size: 28rpx;
		margin-bottom: 15rpx;
	}

	.moneyWrap {}

	.remarkWrap {
		background: transparent;
	}

	.disBtn {}

	.active {
		background: #0f67d5;
		color: #fff;
	}

	.show_Title {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .6);
	}

	.show-title-title {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		width: 700rpx;
		border-radius: 8px;
		padding: 40rpx 26rpx 26rpx;
		box-sizing: border-box;
	}

	.show-title-title-text {
		text-align: center;
		font-size: 42rpx;
		color: rgb(8, 8, 8);
	}

	.show-title-title-content {
		font-size: 30rpx;
		color: #6B6B6B;
		text-align: center;
		margin-top: 30rpx;
	}

	.show-title-button {
		text-align: center;
		border-top: 1px solid #EDF0F2;
		color: rgb(59, 156, 216);
		font-size: 30rpx;
		margin-top: 20rpx;
		padding-top: 20rpx;
	}

	>>>.uni-input-input {
		font-size: 24rpx;
	}

	>>>.uni-input-placeholder {
		font-size: 24rpx;
	}

	>>>.moneyInfo .uni-input-input {
		font-size: 36rpx;
	}

	>>>.moneyInfo .uni-input-placeholder {
		font-size: 36rpx;
	}

	>>>.transRemark .uni-input-input {
		font-size: 30rpx;
	}

	>>>.transRemark .uni-input-placeholder {
		font-size: 30rpx;
	}
</style>